<script>
	let active = false;
	function hovemen(params) {
		active = !active;
	}
</script>

<div
	class={active
		? 'w-full my-10  bg-yellow-300 text-green-400 h-20  justify-center items-center flex ease-in-out transition-transform'
		: 'w-full bg-blue-300 text-yellow-400 h-20 justify-center items-center flex my-10'}
	on:click={() => (active = !active)}
>
	点我弹出
</div>
<svg class="hamburger" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
	<line x1="25" y1="42" x2="75" y2="42" class={active ? 'one_click line_oen' : 'line_oen'} />
	<line class={active ? 'two_click line_two' : 'line_two'} x1="25" y1="50" x2="75" y2="50" />
	<line class={active ? 'three_click line_three' : 'line_three'} x1="25" y1="58" x2="75" y2="58" />
</svg>

<style>
	svg {
		width: 500px;
	}
	line {
		stroke: #fff;
		stroke-width: 4px;
		fill: none;
		stroke-miterlimit: 10;
		stroke-linecap: round;
		transform-box: fill-box;
		transform-origin: center;
		transition: all 0.2s ease-in-out 0.3s;
	}
	.hamburger {
		background-color: green;
	}
	.hamburger:hover .line_oen,
	.hamburger:hover .line_two,
	.hamburger:hover .line_three {
		transform-origin: 50% 50%;
		animation: line_move 0.3s ease-out 0.5s;
	}
	/* .hamburger:hover .line_oen,
  .hamburger:hover .line_two,
  .hamburger:hover .line_three {
    transform-origin: 50% 50%;
    transition: all ease-in-out 0.8s;
  } */
	.hamburger:hover .line_oen {
		animation-delay: 75ms;
		transform: rotateY(8px) rotate(45deg);
	}
	.hamburger:hover .line_three {
		animation-delay: 150ms;
	}
	.hamburger:hover .line_two {
	}
	@keyframes line_move {
		0% {
			transform: scaleX(1);
		}
		50% {
			transform: scaleX(1.5);
		}
		100% {
			transform: scaleX(1);
		}
	}
	.one_click {
		transform: translateY(8px) rotate(45deg);
	}
	.two_click {
		transform: scaleX(0);
	}
	.three_click {
		transform: translateY(-8px) rotate(-45deg);
	}
</style>
